<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>安装币规则</title>
<link href="/res/back/css/base.css" rel="stylesheet" type="text/css" />
<link href="/res/third/bootstrap3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="/res/common/js/jquery.1.9.1.min.js" type="text/javascript"></script>
<script src="/res/third/artDialog/jquery.artDialog.js" type="text/javascript"></script>
<script src="/res/third/validate/jquery.validate.js" type="text/javascript"></script>
<script src="/res/third/easyUI/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/res/third/easyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<link href="/res/third/powerFloat/css/powerFloat.css" rel="stylesheet" type="text/css" />
<script src="/res/third/powerFloat/js/mini/jquery-powerFloat-min.js" type="text/javascript"></script>
<script src="/res/third/My97DatePicker/WdatePicker.js"></script>
<script src="/res/common/js/vue.js"></script>
</head>
<body>
<!-- 新建 -->
	   <div class="panel panel-info" id="app">
	        <div class="panel-heading">
	          <h3 class="panel-title">规则管理</h3>
	        </div>
        <div class="panel-body" style="overflow: hidden;border-bottom: none;">
			<form class="form-horizontal" role="form"   id="mainForm">
                <input type="hidden" name="id" value="${rule.id!}">
			  <div class="form-group" style="margin-top:15px;">
			    <label for="title" class="col-sm-2 control-label"><span style="color:red;">*</span>规则标识</label>
			    <div class="col-sm-5">
			      <input type="text" class="form-control" id="ruleCode" placeholder="请输入规则标识" name="ruleCode" required="required" value="${rule.ruleCode!}">
			    </div>
			  </div>
			  <div class="form-group">
			    <label for="title" class="col-sm-2 control-label"><span style="color:red;">*</span>规则名称</label>
			    <div class="col-sm-5">
			      <input type="text" class="form-control" id="title" placeholder="请输入规则标题" name="title" required="required" value="${rule.title!}">
			    </div>
			  </div>



			  <div class="form-group">
			    <label for="title" class="col-sm-2 control-label">规则类型</label>
			    <div class="col-sm-5">
			      <input type="radio" name="operateType" value="1" v-model="operateType">赠送
			      <input type="radio" name="operateType" value="-1" v-model="operateType">抵扣
			    </div>
			  </div>
			  <div class="form-group">
			    <label class="col-sm-2 control-label" v-if="operateType == 1">赠送方式</label>
                <label class="col-sm-2 control-label" v-if="operateType == -1">抵扣方式</label>
			    <div class="col-sm-5">
			      <input type="radio" name="type" value="2" v-model="type" id="blRadio">比例
				  <template v-if="operateType == 1">
					<input type="radio" name="type" value="1" v-model="type">数量
				  </template>
                  <template v-if="operateType == 1">
					  <input type="radio" name="type" value="3" v-model="type">混合
				  </template>
			    </div>
			  </div>
			  <div class="form-group" v-show="type != 1" id="blDiv">
			    <label for="title" class="col-sm-2 control-label" v-if="operateType == 1">赠送比例</label>
			    <label for="title" class="col-sm-2 control-label" v-if="operateType == -1">抵扣比例</label>
			    <div class="col-sm-5 form-inline">
			      <input type="number" class="form-control" id="coinAmount" placeholder="分子" name="coinAmount" required="required" style="width: 100px;" value="${rule.coinAmount!}" >&nbsp;&nbsp;/&nbsp;&nbsp;
			      <input type="number" class="form-control" id="orderAmount" placeholder="分母"  name="orderAmount" required="required" style="width: 100px;" value="${rule.orderAmount!}">
			    </div>
			  </div>
				<div class="form-group" v-show="type != 2" id="slDiv">
					<label for="title" class="col-sm-2 control-label" v-if="operateType == 1">赠送数量</label>
                    <label for="title" class="col-sm-2 control-label" v-if="operateType == -1">抵扣数量</label>
					<div class="col-sm-5">
						<input type="number" class="form-control" id="amount" placeholder="个数"  name="amount" required="required" style="width: 200px;" value="${rule.amount!}">
					</div>
				</div>



			  <div class="form-group" >
			    <label for="title" class="col-sm-2 control-label"><span style="color:red;">*</span>生效时间</label>
			    <div class="col-sm-5">
			      <input  name="starttime" class="Wdate form-control" id="startdate" required="required" style="width:120px;" value="[#if rule.starttime??]${rule.starttime?string('yyyy-MM-dd')!}[/#if]"
                          onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'enddate\')}'})">
			    </div>
			  </div>
			  <div class="form-group">
			    <label for="title" class="col-sm-2 control-label"><span style="color:red;">*</span>失效时间</label>
			    <div class="col-sm-2">
			      <input name="endtime" id="enddate" class="Wdate form-control" required="required" style="width:120px;" value="[#if rule.endtime??]${rule.endtime?string('yyyy-MM-dd')!}[/#if]"
                         onFocus="WdatePicker({minDate:'#F{$dp.$D(\'startdate\')}'})">
			    </div>
			  </div>
			  <div class="form-group">
			    <div class="col-sm-offset-2 col-sm-10">
			      <button type="button" class="btn btn-info" onclick="subForm();">提交</button>
			    </div>
			  </div>
			</form>
        </div>
      </div>

<script type="text/javascript">
	var app = new Vue({
		el : '#app',
		data : {
            type : 2,			//类别(1按数量 2：按比例 3混合)
            operateType : 1		//规则类型(1:赠送分,-1:抵扣)
		},
		created : function() {
			[#if (rule.id)??]
			    this.type = ${rule.type};
				this.operateType = ${rule.operateType};
			[/#if]
		},
		watch : {
            operateType : function(val) {
                //抵扣只有比例
				if(val == -1) {
					//this.type == 2;
                    $('#blRadio').click();
				}
			}
		}
	});

    function subForm(){
        var ruleCode=$("#ruleCode").val().trim();
        if(ruleCode==""){
            alert("规则标识不能为空");
            return false;
        }else{
            var flag=true;
            art.dialog.post({
                type : "post",
                dataType : "json",
                async:false,
                url : "/coin/validateRule.do",
                data : {code:$("#ruleCode").val().trim(), ruleId : '${rule.id!}'},
                success : function(data) {
                    if(!data.success){
                        alert(data.msg);
                        flag=false;
                    }
                }

            },"数据正在提交.... ");
            if(!flag){
                return flag;
            }
        }
        var title=$("#title").val();
        if(title==""){
            alert("规则标题不能为空");
            return false;
        }
        var startdate=$("[name='starttime']").val();
        var enddate=$("[name='endtime']").val();
        if(startdate==""||enddate==""){
            alert("时间不能为空");
            return false;
        }

        if($('#blDiv').is(':visible')) {
            var coinAmount=$("#coinAmount").val();
            var orderAmount=$("#orderAmount").val()
            if(coinAmount==""||orderAmount==""){
                alert("分子分母不能为空");
                return false;
            }else{
                if(parseInt(orderAmount) <= 0 || parseInt(coinAmount) <= 0) {
                    alert('分子和分母都应该大于0')
                    return;
                }
                if(parseInt(coinAmount)>parseInt(orderAmount)){
                    alert("分子必须小于分母");
                    return;
                }
            }
        } else {
            $("#coinAmount").val('');
            $("#orderAmount").val('');
        }

        if($('#slDiv').is(':visible')) {
            var amount=$("#amount").val();
            if(amount==""){
                alert("数量不能为空");
                return false;
            }
        } else {
            $("#amount").val('');
        }

        art.dialog.post({
            type : "post",
            dataType : "json",
            url : "/coin/coinRule_add.do",
            data : $("#mainForm").serialize(),
            success : function(data) {
                if(data.success){
                    alert(data.msg);
                    top.closeTempTab(true);
                }else{
                    alert(data.msg);
                }
            }
        },"数据正在提交.... ");
    }
</script>
</body>
</html>

